<template>
	<view>
		<!-- 自定义导航 -->
		<uni-nav-bar :fixed="true" :border="false" status-bar left-icon="left" @clickLeft="goBack">
			<view class="flex align-center justify-center w-100">
				所有人可见<text class="iconfont icon-shezhi pl-2"></text>
			</view>
		</uni-nav-bar>
		<!-- 文本域组件 -->
		<textarea v-model="content" placeholder="说一句话吧~" class=" uni-textarea px-2" />

		<!-- 多图上传 -->
		<upload-image :show="show" ref="uploadImage" :list="imageList" @change="changeImage"></upload-image>

		<!-- 底部操作条 -->
		<view class="fixed-bottom bg-white flex align-center" style="height: 85rpx;">
			<view class="iconfont icon-caidan footer-btn animated" hover-class="jello"></view>
			<view class="iconfont icon-huati footer-btn animated" hover-class="jello"></view>
			<view class="iconfont icon-tupian footer-btn animated" hover-class="jello" @click="iconClickEvent('uploadImage')"></view>
			<!-- 发送按钮 -->
			<view class="bg-main text-white ml-auto flex justify-center align-center rounded mr-2 animated"
				style="width: 140rpx; height: 60rpx;" hover-class="jello">
				发送
			</view>

		</view>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-ui/uni-nav-bar/uni-nav-bar.vue';
	import uploadImage from '@/components/common/upload-image.vue';
	export default {
		components: {
			uniNavBar,
			uploadImage
		},
		data() {
			return {
				content: '',
				imageList: [],
				// 是否已经弹出一次提示框
				showBack: false
			}
		},
		computed: {
			show(){
				return this.imageList.length > 0
			}
		},
		// 监听返回
		onBackPress() {
			if ((this.content !== '' || this.imageList.length > 0) && !this.showBack) {
				uni.showModal({
					content: '是否要保存为草稿？',
					showCancel: true,
					cancelText: '不保存',
					confirmText: '保存',
					success: res => {
						// 点击确认
						if (res.confirm) {
							this.store()
						} else { // 点击取消，清除缓存
							uni.removeStorage({
								key: "add-input"
							})
						}
						// 手动执行返回
						uni.navigateBack({
							delta: 1
						});
					},
				});
				this.showBack = true
				return true
			}
		},
		// 页面加载时
		onLoad() {
			uni.getStorage({
				key: "add-input",
				success: res => {
					if(res.data) {
						let obj = JSON.parse(res.data)
						this.content = obj.content
						this.imageList = obj.imageList
					}
				}
			})
		},
		
		methods: {
			// 底部图片logo点击
			iconClickEvent(e) {
				switch (e){
					case 'uploadImage':
						this.$refs.uploadImage.chooseImage()
						break;
				}
			},
			//选中图片
			changeImage(e) {
				this.imageList = e
			},
			// 保存草稿
			store() {
				// 保存为本地存储
				uni.setStorage({
					key: 'add-input',
					data: JSON.stringify({
						content: this.content,
						imageList: this.imageList
					})
				})
			},
			// 返回上一步
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			}

		}
	}
</script>

<style>
	.footer-btn {
		width: 86rpx;
		height: 86rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 50rpx;
	}
</style>